<template>
    <Dialog v-model="dialogVisible" width="700px" :title="`${info?.id}设置`" maxHeight="450px" @close="closeHandle">
        <el-tabs tab-position="left" style="height: 100%" class="">
            <el-tab-pane label="服务"><service :info="info"></service></el-tab-pane>
        </el-tabs>
    </Dialog>
</template>
<script setup lang="ts">
import { ref, watch, defineEmits, reactive, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import service from '../service.vue' 

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    modelValue: propTypes.bool.def(false),
    info:propTypes.object.def(undefined)
})

//弹出框状态
const dialogVisible = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
    dialogVisible.value = newVal;
})

//关闭
const closeHandle = () => {
    dialogVisible.value = false;
    //初始化数据
    emit('update:modelValue', dialogVisible)
}
</script>
  

  